<template>
  <view class="userinfo_body">
    <view class="header">
      <view class="left"><uni-icons type="back" size="30" color="#ffb612" @click="back"></uni-icons></view>
      <view class="title">个人资料</view>
    </view>
    <view class="form">
      <uni-forms label-width="400">
        <uni-forms-item label="照片" name="name">
          <view class="" id="up" style="width: 100%; display: flex; justify-content: flex-end;">
            <view class="avatar"><image :src="avatar" alt="" class="icon_img" mode="aspectFill" /></view>
          </view>
          <view></view>
        </uni-forms-item>
        <uni-forms-item label="姓名" name="age">{{ userInfo.user.idName }}</uni-forms-item>
        <uni-forms-item label="身份证号" name="age">{{ userInfo.user.idNumber }}</uni-forms-item>
        <uni-forms-item label="区域" name="age">{{ areaInfo }}</uni-forms-item>
      </uni-forms>
    </view>
  </view>
</template>

<script>
import config from '@/config.js';
import { getUserInfoAPI, getAvatarAPI, updateNickNameAPI } from '@/api/user.js';
export default {
  data() {
    return {
      imageStyles: {
        width: 45,
        height: 45,
        border: {
          color: '#6c6c6c',
          width: 2,
          style: '',
          radius: '20px'
        }
      },
      formData1: {
        nickName: ''
      },
      Area: [
        { value: 2, text: '贵阳市' },
        { value: 3, text: '息烽县' },
        { value: 4, text: '花溪区' },
        { value: 5, text: '观山湖区' },
        { value: 6, text: '云岩区' },
        { value: 7, text: '南明区' },
        { value: 8, text: '乌当区' },
        { value: 9, text: '清镇市' },
        { value: 10, text: '修文县' },
        { value: 11, text: '白云区' },
        { value: 12, text: '开阳县' }
      ],
      avatar: '',
      token: '',
      rules: {
        nickName: {
          rules: [
            {
              required: true,
              errorMessage: '昵称为必填项'
            }
          ]
        }
      },
      areaInfo: '',
      userInfo: {},
      isEditNickName: false
    };
  },
  methods: {
    init() {
      this.getUserInfo();
    },
    isShowUpdateName() {
      this.isEditNickName = true;
      this.formData1.nickName = this.userInfo.username;
    },

    back() {
      uni.navigateTo({
        url: '/pages/maintenance-worker/maintenance-worker?num=1'
      });
      // if (!this.isEditNickName) {
      //   uni.switchTab({
      //     url: '/pages/mine/mine'
      //   });
      // } else {
      //   this.isEditNickName = false;
      //   this.$refs.nickForm.clearValidate();
      // }
    },

    async getUserInfo() {
      const { data } = await getUserInfoAPI();
      this.userInfo = data.data;
      this.areaInfo = this.Area.find(i => i.value === this.userInfo.user.districtId)['text'];
      this.avatar = `${config.baseURL}/img/${this.userInfo.user.facePhoto}`;
    }
  },
  onShow: function() {
    // this.init();
    this.token = uni.getStorageSync('token');
    this.userInfo = uni.getStorageSync('userData');
    this.avatar = `${config.baseURL}/img/${this.userInfo.user.avatar}`;
    this.areaInfo = this.Area.find(i => i.value === this.userInfo.user.districtId)['text'];
  }
};
</script>

<style lang="scss">
.userinfo_body {
  height: 100vh;
  background-color: #333333;

  #id {
    width: 100%;
    text-align: end;
    display: flex;
    justify-content: flex-end;
  }

  ::v-deep .edit {
    padding: 0 20px;

    .uni-easyinput__content-input {
      background-color: unset !important;
    }

    .nickName_input {
      border-radius: 8px;
      border: 1px solid #ffb612;

      .uni-easyinput__content-input {
        background-color: #4f4f4f !important;
      }

      .uniui-clear {
        color: #a7a7a7 !important;
      }

      .is-input-border {
        background-color: unset !important;
        border-color: #4f4f4f !important;
      }
    }

    .btn {
      background-color: #ffb612;
      color: #fff;
    }
  }

  ::v-deep .form {
    margin-top: 40rpx;

    .avatar {
      width: 70rpx;
      height: 70rpx;
      border: 1px solid;
      border-radius: 50%;
      // margin-right: 10rpx;
      color: white;

      .icon_img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .uni-forms-item {
      align-items: center;
      justify-content: space-between;
      background-color: #4f4f4f;
      padding-right: 20rpx;
      color: #ffb612;
      padding: 20rpx;

      .uni-forms-item__label {
        padding-left: 20rpx;
        color: #ffb612;
      }

      .uni-forms-item__content {
        text-align: end;
        display: contents;
        margin-right: 20rpx !important;
      }

      .uni-file-picker__container {
        justify-content: flex-end !important;
      }
    }
  }

  .header {
    color: #ffb612;
    display: flex;
    // justify-content: space-between;
    padding: 20rpx 10rpx;
    padding-top: 80rpx;
    align-items: center;
    background-color: #4f4f4f;

    .title {
      color: #ffb612;
      text-align: center;
      width: 80%;
    }
  }
}
</style>
